var DOMfx = {
	imgPref	: ["../img/aulas1-",        "../img/oficinas1-",           "../img/ofiaul-"],
	imgAlt	: ["Tour Aulas",            "Tour Oficinas",               "Tour Aulas Oficinas"],
	imgHref : ["../kml/tourAulas.kml",  "../kml/tourOficinas.kml",     "../kml/tourAulasOficinas.kml"],
         
	init 	: function() {
		var div = document.getElementById('domfx');
		var ary = new Array();
		for (var i = 0; i < DOMfx.imgPref.length; i++) {
			var newAry = new Object();
			newAry.name = DOMfx.imgPref[i];
			newAry.alt = DOMfx.imgAlt[i];
			newAry.extension = '.jpg';
			newAry.sizes = [64, 128];
			newAry.onclick = function(e) { 
				if (!e) e = window.event;
				var target = e.target || e.srcElement;

				window.location.href = target.alt; 
			}
			
			ary.push(newAry);			
		}
		
		dock.init(document.getElementById('domfx'), ary, 64, 128, 2.5);
	}
};

var dock = {
	images : null,
	scale : null,
	closeTimeout : null,
	closeInterval : null,
	openInterval : null,
	imageNodes : null,
	imageSizes : null,
	imageDetails : null,
	node : null,
	range : null,
	maximumSize : null,
	minimumSize : null,
		
	init : function(node, imageDetails, minimumSize, maximumSize, range) {
		images = new Array();
		for (var i = 0; i < imageDetails.length; i++) {
			for (var j = 0; j < imageDetails[i].sizes.length; j++) {
				var image = new Image(imageDetails[i].sizes[j], imageDetails[i].sizes[j]);
				image.src = imageDetails[i].name
							+ imageDetails[i].sizes[j]
							+ imageDetails[i].extension;
				images.push(image);
			}
		}
	
		dock.scale = 0;
		dock.imageNodes	= new Array(imageDetails.length);
		dock.imageSizes	= new Array(imageDetails.length);
		dock.node = node;
		dock.node.style.textAlign = 'left';
		dock.node.style.height = maximumSize + 'px';
		dock.imageDetails = imageDetails;
		
		dock.minimumSize = minimumSize;
		dock.maximumSize = maximumSize;
		dock.range = range;
		node.innerHTML = "<br />";
                 
		for (var i = 0; i < dock.imageDetails.length; i++) {
			dock.imageNodes[i] = document.createElement('img');
			dock.imageSizes[i] = dock.minimumSize;
			dock.imageNodes[i].style.position = 'relative';
			dock.setImageProperties(i);
			node.appendChild(dock.imageNodes[i]);
                        
                        if (dock.imageNodes[i].addEventListener) {
				dock.imageNodes[i].addEventListener('mousemove', dock.processMouseMove, false);
				dock.imageNodes[i].addEventListener('mouseout', dock.processMouseOut, false);
				dock.imageNodes[i].addEventListener('click', dock.imageDetails[i].onclick, false);
			} else if (dock.imageNodes[i].attachEvent) {
				dock.imageNodes[i].attachEvent('onmousemove', dock.processMouseMove);
				dock.imageNodes[i].attachEvent('onmouseout', dock.processMouseOut);
				dock.imageNodes[i].attachEvent('onclick', dock.imageDetails[i].onclick);
			}
		}
        },
	
	setImageProperties : function(index) {
		var imageNode = dock.imageNodes[index];
		var details   = dock.imageDetails[index];
		var size = dock.minimumSize + dock.scale * (dock.imageSizes[index] - dock.minimumSize);
		var sizeIndex = -1;
		
		do {
			sizeIndex++;
		} while (sizeIndex < details.sizes.length &&  details.sizes[sizeIndex] < size);
		
		if (sizeIndex >= details.sizes.length) sizeIndex--;
		imageNode.setAttribute('src', details.name + details.sizes[sizeIndex] + details.extension);
		imageNode.setAttribute('width',  size);
		imageNode.setAttribute('height', size);
		imageNode.style.marginTop = (dock.maximumSize - size) + 'px';
		imageNode.setAttribute("alt", DOMfx.imgHref[index]);
		imageNode.setAttribute("title", details.alt);
	},

	processMouseMove : function(e) {
		if (!e) e = window.event;
		var target = e.target || e.srcElement;
		var index = 0;
		window.clearTimeout(dock.closeTimeout);
		dock.closeTimeout = null;
		window.clearInterval(dock.closeInterval);
		dock.closeInterval = null;
		
		if (dock.scale != 1 && !dock.openInterval) {
			dock.openInterval = window.setInterval(
			function() {
				if (dock.scale < 1) dock.scale += 0.125;
				
				if (dock.scale >= 1) {
					dock.scale = 1;
					window.clearInterval(dock.openInterval);
					dock.openInterval = null;
				}
				
				for (var i = 0; i < dock.imageNodes.length; i++) {
					dock.setImageProperties(i);
				}
			}, 20);
		}
		
		while (dock.imageNodes[index] != target) index++;
		
		var across = (e.layerX || e.offsetX) / dock.imageSizes[index];
		if (across) {
			for (var i = 0; i < dock.imageSizes.length; i++) {
				if ((i < index - dock.range) || (i > index + dock.range)) {
					dock.imageSizes[i] = dock.minimumSize;
				} else {
					dock.imageSizes[i] = dock.minimumSize + Math.ceil((dock.maximumSize - dock.minimumSize) * (Math.cos(i - index - across + 0.5) + 1) / 2);
				}
				dock.setImageProperties(i);
			}
		}
	},

	processMouseOut : function() {
		if (!dock.closeTimeout && !dock.closeInterval) {
			dock.closeTimeout = window.setTimeout(
			function() {
				dock.closeTimeout = null;
				if (dock.openInterval) {
					window.clearInterval(dock.openInterval);
					dock.openInterval = null;
				}
				dock.closeInterval = window.setInterval(function() {
					if (dock.scale > 0) dock.scale -= 0.125;
					if (dock.scale <= 0) {
						dock.scale = 0;
						window.clearInterval(dock.closeInterval);
						dock.closeInterval = null;
					}
					for (var i = 0; i < dock.imageNodes.length; i++) {
						dock.setImageProperties(i);
					}
				}, 20);
			}, 100);
		}
	}
}
